<template>
  <div class="container">
    <!-- 头部订单确定 -->
    <div class="top">
      <div class="back" @click="back">
        <i></i>
      </div>
      <!-- <a @click="$router.go(-1)" class="back">
        <i></i>
      </a> -->

      <div class="title">订单确认</div>

      <div class="change"></div>
    </div>

    <!-- 地址卡 -->
    <div class="local2">
      <div class="box local" @click="changeaddress" v-if="!haveshow">
        <div class="div2">
          <i></i>
          <div class="left">
            <div class="content">
              <h4>{{ localmessage.large }}</h4>
            </div>
            <h5>
              {{ localmessage.name }}<span>{{ localmessage.phone }}</span>
            </h5>
            <h6>{{ localmessage.datail }}</h6>
          </div>
        </div>
        <div class="right">
          <i></i>
        </div>
      </div>

      <div class="box2" @click="changeaddress" v-if="haveshow">
        <h6><span>+</span>添加收货地址</h6>
      </div>
    </div>
    <!-- 灰色的线条 -->
    <div class="line1"></div>
    <!-- 购物卡 -->
    <div class="main">
      <div class="box">
        <div class="content" v-for="item in buyData" :key="item">
          <div class="left">
            <img :src="item.bannerData.img" alt="" />
          </div>

          <div class="right">
            <h6>{{ item.bannerData.title }}</h6>

            <span>x{{ item.bannerData.num }}</span>

            <div class="text">
              ￥{{ item.bannerData.disprice }}
              <!-- <div class="addDec">
                <div class="tli-r" @click="sub2(item.id)">-</div>
                <div class="tli-num">{{ item.much }}</div>
                <div class="tli-a" @click="increase2(item.id)">+</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 灰色的线 -->
    <div class="line1"></div>
    <!-- 下面具体内容 -->
    <div class="text">
      <div class="sum">
        <h6>总价</h6>
        <span>￥{{ (money * 100) / 100 }}</span>
      </div>
      <div class="sum">
        <h6>运费</h6>
        <span>￥免运费</span>
      </div>
      <div class="sum3">
        <h6>优惠</h6>
        <h5>暂无可用优惠<i></i></h5>
      </div>
      <div class="sum4">
        <h6>应付款</h6>
        <span>￥{{ (money * 100) / 100 }}</span>
      </div>
      <div class="sum5">
        <h6>买家留言:</h6>
        <input type="text" placeholder="选填，填写内容已和卖家协商确认" />
      </div>
    </div>
    <!-- 灰色的线 -->
    <div class="line2"></div>
  </div>
  <!-- 底部购买 -->
  <div class="buy">
    <h6>
      合计: <span>￥{{ (money * 100) / 100 }}</span>
    </h6>
    <div class="sub" @click="pay">提交订单</div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { getShopMessageData2 } from "../assets/api/home";
import router from "@/router";
import store from "@/store";
// import { useRoute } from 'vue-router';
// import { useRoute } from 'vue-router';
export default {
  setup() {
    // let route = useRoute();
    //总价格
    let money = JSON.parse(window.localStorage.getItem("allmoney"));

    //页面跳转支付
    let pay = () => {
      router.push({
        path: "/pay",
      });
    };
    //返回上一页
    let back = () => {
      // console.log("1");
      router.push({
        path: "/shoppingcar",
      });
    };
    //一个书本的详情
    let bannerDataFun = reactive({
      bannerData: [],
    });
    //举个例子引入的信息
    let getShopMessageDataFun = () => {
      getShopMessageData2().then((data) => {
        // console.log(data);
        //轮播图信息
        bannerDataFun.bannerData = data.data.results.body.detail;
      });
    };

    //选择地址跳转
    let changeaddress = () => {
      router.push({
        path: "/addreslocal",
      });
    };

    //读取存入本地的点击
    let num = JSON.parse(window.localStorage.getItem("num"));
    //地址信息
    let message = JSON.parse(window.localStorage.getItem("address"));

    // let route=useRoute()
    // console.log("立即购买==>",route.query.key);

    //判断是否显示
    let haveshow = ref("true");

    let localmessage = ref("");

    //没有值或者长度为0
    if (!message || message.lenth == 0) {
      haveshow.value = true;
      // 否则显示
    } else {
      //查找下标
      let index = message.findIndex((item) => {
        return item.id == num;
      });
      if (index == -1) {
        haveshow.value = true;
      } else {
        haveshow.value = false;
        // 找到的话就显示
        localmessage.value = message[index];
      }
    }

    //新建一个空数组来接受请求数据
    let todata = reactive({
      buyData: [],
    });

    let gettoday = () => {
      todata.buyData = store.state.readyCar;
      // console.log(todata.buyData[0].bannerData);
    };
    gettoday();

    getShopMessageDataFun();

    return {
      ...toRefs(bannerDataFun),
      ...toRefs(todata),
      pay,
      back,
      money,
      changeaddress,
      localmessage,
      message,
      haveshow,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

.line1 {
  height: 10px;
  background-color: #f6f7f9;
  width: 100%;
}
.container {
  .top {
    padding: 0px 15px;
    display: flex;
    align-items: center;
    background-color: #f5f6fa;
    .back {
      width: 6%;
      height: 52px;
      background-image: url(../assets/img/back.png);
      background-repeat: no-repeat;
      background-size: 23px 23px;
      background-position: 0px 15px;
    }
    .title {
      flex: 1;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 17px;
      font-weight: bolder;
    }
    .change {
      font-size: 17px;
      color: #212530;
      height: 52px;
      line-height: 52px;
    }
  }
}
.local2 {
  position: relative;
}
.local > .div2 {
  display: flex;
  align-items: center;
}
.local > .div2 > i {
  display: block;
  width: 35px;
  height: 35px;
  background-image: url(../assets/img/order-address-defalt.4352d60.png);
  background-size: 35px 35px;
  margin-right: 10px;
}
.local2 > .box {
  display: flex;
  padding-left: 15px;
  padding-right: 17px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f2f3;
}
.box2 {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f1f2f3;
  font-size: 18px;
  height: 60px;
  h6 {
    font-size: 16px;
    color: #4c84ff;
    border: 1px solid #4c84ff;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    padding: 0px 70px;
    span {
      margin-right: 5px;
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.local2 > .box .left .content h4 {
  height: 33px;
  line-height: 33px;
  font-size: 12px;
  color: #25242a;
  font-weight: normal;
}
.local2 > .box .left h5 {
  height: 33px;
  line-height: 33px;
  font-size: 16px;
  color: #15220e;
  font-weight: bold;
}
.local2 > .box .left h6 {
  height: 29px;
  line-height: 29px;
  font-size: 15px;
  color: #292732;
  font-weight: normal;
}
.local2 > .box .right {
  width: 17px;
  height: 17px;
}
.local2 > .box .right i {
  display: block;
  width: 8px;
  height: 17px;
  background-image: url(../assets/img/ic_right.1a162c4.png);
  background-size: 8px 17px;
}
.text {
  display: flex;
  flex-direction: column;
}
.text .sum {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.text .sum h6 {
  color: #29272a;
  padding-left: 15px;
  font-size: 15px;
  font-weight: normal;
}
.text .sum span {
  padding-right: 15px;
  font-size: 13px;
}
.text .sum3 {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.text .sum4 {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.text .sum5 {
  display: flex;
  height: 50px;
  align-items: center;
}
.text .sum3 h6 {
  color: #29272a;
  padding-left: 15px;
  font-size: 15px;
  font-weight: normal;
}
.text .sum3 h5 {
  padding-right: 15px;
  font-size: 13px;
  color: #fe5b3a;
  font-weight: normal;
  display: flex;
  height: 50px;
  align-items: center;
}
.text .sum3 h5 i {
  display: block;
  width: 8px;
  height: 14px;
  margin-left: 10px;
  background-image: url(../assets/img/ic_right.1a162c4.png);
  background-size: 8px 14px;
}
.text .sum4 h6 {
  color: #29272a;
  padding-left: 15px;
  font-size: 15px;
  font-weight: normal;
}
.text .sum4 span {
  padding-right: 15px;
  font-size: 13px;
  color: #fe5b3a;
}
.text .sum5 h6 {
  color: #29272a;
  padding-left: 15px;
  font-size: 15px;
  font-weight: normal;
}
.text .sum5 span {
  color: #767676;
  font-size: 15px;
}
.text .sum5 input {
  flex: 1;
  padding-left: 20px;
}
.main > .box {
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
}
.main > .box .content {
  display: flex;
  // border-bottom: 3px solid #f5f6f7;
  flex: 1;
  height: 135px;
  background-color: #ffffff;
  border-radius: 6px;
  margin-left: 6px;
  padding-bottom: 10px;
}
.main > .box .content .left {
  display: flex;
  width: 90px;
  height: 116px;
  margin-right: 14px;
  height: 135px;
  align-items: center;
}
.main > .box .content .left img {
  width: 90px;
  height: 116px;
}
.main > .box .content .right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
}
.main > .box .content .right > h6 {
  color: #2f2526;

  font-size: 14px;
  font-weight: bold;
}
.main > .box .content .right span {
  color: #c1c2c4;
  font-size: 12px;
  display: block;
  height: 29px;
  line-height: 29px;
}
.main > .box .content .right .text {
  color: #142b3d;
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
}
.main > .box .content .right .text .addDec {
  display: flex;
  border: 1px solid #e3e4e6;
  border-radius: 2px;
  width: 40%;
  margin-right: 10px;
}
.main > .box .content .right .text .addDec .tli-r {
  width: 25%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-right: 1px solid #e3e4e6;
}
.main > .box .content .right .text .addDec .tli-num {
  flex: 1;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}
.main > .box .content .right .text .addDec .tli-a {
  width: 25%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-left: 1px solid #e3e4e6;
}
.line2 {
  width: 100%;
  // height: 1000px;
  // height: 1px;
  // background-color: #f5f6fa;
}
// .buy{
//     position: sticky;
//     bottom: 0px;
//     display: flex;
//     justify-content: end;
//     height: 50px;
//     align-items: center;
//     padding-right: 15px;
//     background-color: #ffffff;
// }

.buy {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 10px 15px 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 0px #dfdfdf;
}
.buy h6 {
  font-size: 16px;
}
.buy h6 span {
  font-size: 18px;
}
.buy .sub {
  width: 95px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #fff4ff;
  border-radius: 3px;
  background-color: #ff5b3f;
  margin-left: 32px;
  position: relative;
}
.buy .sub::after {
  display: block;
  content: "";
  position: absolute;
  height: 35px;
  width: 1px;
  left: -16px;
  top: 3px;
  background-color: #efefef;
}
</style>